<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="fonts/css/font-awesome.min.css"/>
		<script src="js/rem.js"></script>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/angular.min.js"></script>
		<script src="js/angular-ui-router.js"></script>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		body{
			position: relative;
			height: 44rem;
		}
		#box{
			height: 43rem;
			overflow: auto;
		}
		.header{
			width: 100%;
			display: flex;
			justify-content: space-between;
			height: 3rem;
			line-height: 3rem;
			
		}
		.header>p{
			width: 40%;
			text-align: center;
			/*border-bottom: 2px solid red;*/
			box-sizing: border-box;
			margin: 0rem 2rem;
			font-size: 1.5rem;
		}
		.content{
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			box-sizing: border-box;
			padding: 0rem 0.5rem;
			background: whitesmoke;
		}
		.content>li{
			width: 49%;
			background: white;
			box-sizing: border-box;
			padding: 0.5rem 0.5rem;
			margin-top: 0.5rem;
		}
		.content-bottom{
			display: flex;
			margin-top: 2rem;
			justify-content: space-between;
		}
		.content-bottom>.p{
			color: red;
		}
		.fa{
			margin-right: 0.1rem;
		}
		h6{
			font-size: 1.1rem;
		}
		li img{
			width: 100%;
		}
		
		.content-one{
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			box-sizing: border-box;
			padding: 0rem 0.5rem;
			background: whitesmoke;
		}
		.content-one>li{
			width: 100%;
			background: white;
			box-sizing: border-box;
			padding: 0.5rem 0.5rem;
			margin-top: 0.5rem;
		}
		.content-one>li .fa{
			color: red;
		}
		
		.foot{
			width: 100%;
			display: flex;
			justify-content: space-around;
			text-align: center;
			position: absolute;
			top: 44rem;
			left: 0;
		}
		.foot>li{
			width: 33%;
			height: 1rem;
			line-height: 1rem;
		}
		.foot>li div{
			font-size: 2.5rem;
		}
		.foot>li>img{
			width: 20%;
		}
		
		
		/*分类*/
		.content-two{
			width: 100%;
			text-align: center;
			padding: 0.4rem 0rem;
			position: relative;
			border-bottom: 2px solid #EEEEEE;
		}
		.content-two>input{
			width: 95%;
			height: 2rem;
			background: #EEEEEE;
			box-sizing: border-box;
			padding-left: 1rem;
		}
		.content-two>span{
			position: absolute;
			top: 1rem;
			right: 2rem;
			color: red;
		}
		.content-two-ul>li{
			width: 100%;
			height: 4rem;
			align-items: center;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0rem 0.5rem;
			/*background: red;*/
			border-bottom: 2px solid #EEEEEE;
		}
		.content-two-ul>li>div{
			display: flex;
			align-items: center;
		}
		.content-two-ul>li span{
			/*box-sizing: border-box;*/
			display: inline-block;
			padding: 0.5rem;
		}
		.content-two-ul>li img{
			width: 25%;
		}
		.fa-chevron-down{
			color: #666666;
		}
		.content-two-ul-ul{
			width: 100%;
			height: 5rem;line-height: 5rem;
			background: #EEEEEE;
			display: none;
			overflow: hidden;
		}
		.content-two-ul-ul>li{
			padding-left: 1.5rem;
			box-sizing: border-box;
			float: left;
		}
		/*我的*/
		
		.wo{
			width: 100%;
			height: 10rem;
			overflow: hidden;
			position: relative;
		}
		.wo>img{
			width: 100%;
		}
		.wo-pos{
			text-align: center;
			position: absolute;
			top: 3rem;
			left: 45%;
			z-index: 15;
		}
		.wo-pos>div{
			width: 4rem;
			height: 4rem;
			border-radius: 50%;
			overflow: hidden;
			background: url(img/xiangqing_09.png) no-repeat;
			background-position-x: -10px;
		}
		.wo-top{
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 1rem 0.5rem;
			align-items: center;
			border: 1px solid red;
		}
		.fa-cog{
			position: absolute;
			right: 1rem;
			top: 1rem;
			font-size: 2rem;
		}
		.wo-content{
			width: 100%;
			height: 30rem;
			background: #EEEEEE;
			padding-top: 1rem;
		}
		.wo-content>div{
			background: white;
		}
		.wo-content-one{
			width: 100%;
			display: flex;
		}
		.wo-content-one>div{
			width: 50%;
			height:3rem;
			font-size: 1.5rem;
			text-align: center;
			line-height: 3rem;
		}
		.wo-content-left>li{
			width: 100%;
			height: 6rem;
			display: flex;
			align-items: center;
		}
		.wo-content-left>li>p{
			width: 5rem;
			height: 5rem;
			box-sizing: border-box;
			padding: 0.2rem;
			margin: 0rem 0.5rem;
		}
	</style>
	<body ng-controller="ctrl">
		
		<div ui-view></div>
		
		
		<ul class="foot">
			<li>
				<a ui-sref="a">
					<div class="fa fa-home"></div>
					<p>首页</p>
				</a>
			</li>
			<li>
				<a ui-sref="b">
					<div class="fa fa-th-large"></div>
					<p>分类</p>
				</a>
			</li>
			<li>
				<a ui-sref="c">
					<div class="fa fa-user"></div>
					<p>我的</p>
				</a>
			</li>
		</ul>
	</body>
	<script type="text/javascript">
		var app = angular.module('app',['ui.router'])
        app.config(function($stateProvider,$urlRouterProvider){
        	$urlRouterProvider.otherwise('/a');
            $stateProvider
                .state('a',{
                    url: '/a',
                    templateUrl: 'a.html'
                })
                .state('b',{
                    url: '/b',
                    templateUrl:"b.html"
                })
                .state('c',{
                    url: '/c',
                    templateUrl:"c.html"
                })
                .state('a.aa',{
                    url: '/a.aa',
                    templateUrl: 'aa.html'
                })
                .state('a.bb',{
                    url: '/a.bb',
                    templateUrl: 'bb.html'
                })
                
           });

		app.controller("ctrl",function($scope){
			$scope.init=function(){
       			$(".content-two-ul>li").click(function(){
				$(this).next().toggle();
				console.log("222");
			   })	
			}

				
			});
			
		
	</script>
</html>
